﻿<template id="layout_header_template">
    <div class="layout-header-box">
        <div class="layout-header-collapse">
            <el-icon v-on:click="collapseChange">
                <component :is="collapse ? 'expand' : 'fold'"></component>
            </el-icon>
        </div>
        <div class="layout-header-tabs">
            <el-tabs v-model="current" v-on:tab-change="tabChange" v-on:tab-remove="tabRemove">
                <el-tab-pane v-for="item in items" :key="item.name" :name="item.name" :closable="item.closable">
                    <template #label>
                        <el-dropdown trigger="contextmenu">
                            <span class="el-dropdown-link">
                                <el-icon v-if="item.icon">
                                    <component :is="item.icon"></component>
                                </el-icon>
                                <span>{{item.title}}</span>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item v-on:click="tabChange(item.name, true)">
                                        <el-icon><Refresh></Refresh></el-icon>
                                        <span>重新加载</span>
                                    </el-dropdown-item>
                                    <el-dropdown-item :disabled="!item.closable" v-on:click="tabRemove(item.name)">
                                        <el-icon><Close></Close></el-icon>
                                        <span>关闭</span>
                                    </el-dropdown-item>
                                    <el-dropdown-item divided v-on:click="tabRemoveAll">
                                        <el-icon><Close></Close></el-icon>
                                        <span>关闭所有标签</span>
                                    </el-dropdown-item>
                                    <el-dropdown-item v-on:click="tabRemoveOther(item.name)">
                                        <el-icon><Close></Close></el-icon>
                                        <span>除此之外全部关闭</span>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="layout-header-user">
            <el-dropdown trigger="click">
                <el-avatar :size="36" :src="avatar?`/userfiles/sys/user/${avatar}`:null">{{name.substring(0,1)}}</el-avatar>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>
                            <el-icon><user></user></el-icon>
                            <span>个人信息</span>
                        </el-dropdown-item>
                        <el-dropdown-item divided v-on:click="logout">
                            <el-icon><switch-button></switch-button></el-icon>
                            <span>退出登录</span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<script type="text/javascript">
    var layout_header = {
        template: "#layout_header_template",
        data() {
            return {
                items: [],
                current: null,
                name: "@(ViewBag.Name)",
                avatar: "@(ViewBag.Avatar)",
                dropLeft: "0px"
            };
        },
        props: ["collapse"],
        methods: {
            init() {
                var that = this;
            },
            collapseChange() {
                this.$emit("collapse-change", !this.collapse);
            },
            tabFind(name) {
                return this.items.find((m) => { return m.name == name; });
            },
            tabDelete(name) {
                return this.items.filter((m) => { return m.name != name; });
            },
            tabChange(name, refresh) {
                this.current = name; this.$emit("tab-change", this.tabFind(name), refresh);
            },
            tabRemove(name) {
                var that = this;
                var item = that.tabFind(name);
                if (item != null) {
                    that.items = that.tabDelete(name);
                    that.$emit("tab-delete", name);
                    if (that.current == name) {
                        var newItem = that.items.at(-1);
                        that.current = newItem.name;
                        that.$emit("tab-change", newItem);
                    }
                }
            },
            tabRemoveAll() {
                this.tabRemoveOther();
            },
            tabRemoveOther(name) {
                var that = this, items = [], dels = [];
                that.items.forEach((m) => {
                    if (m.closable && m.name != name) {
                        that.$emit("tab-delete", m.name);
                        dels.push(m);
                    }
                    else { items.push(m); }
                });
                that.items = items;
                if (!name) {
                    var newName = items[items.length - 1].name;
                    if (that.current != newName) { that.tabChange(newName); }
                }
                else { if (that.current != name) { that.tabChange(name); } }
            },
            tabAdd(menu) {
                if (menu.Src) {
                    var that = this;
                    var name = `menu_${menu.Id}`;
                    var item = that.tabFind(name);
                    if (item == null) {
                        item = {
                            name,
                            id: menu.Id,
                            type: menu.Type,
                            path: menu.Src,
                            icon: menu.Icon,
                            title: menu.Title,
                            closable: menu.Id > 100
                        };
                        that.items.push(item);
                        that.current = item.name;
                        that.$emit("tab-change", item);
                    }
                    else if (that.current != item.name) {
                        that.current = item.name;
                        that.$emit("tab-change", item);
                    }
                }
            },
            logout() {
                app.func.confirm("是否确认退出登录?").then(() => {
                    location.href = "/work/home/logout";
                });
            }
        },
        mounted() { this.init(); }
    };
</script>